<template>
   <div>
       <el-upload
                action="#"
                :http-request="httpRequest"
                list-type="picture-card"
                accept="image/png,image/gif,image/jpg,image/jpeg"
                :on-remove="handleRemove"
               
                :on-success="success"
                :file-list="fileList"
                :limit="1"
                :on-exceed="allowImgsNum"
              >
                 <img style="width:100%;height:100%" v-if="imageUrl" :src="imageUrl" alt="">
                 <i v-else class="el-icon-plus"></i>
            </el-upload>
           
   </div>
</template>

<script>
import {getImgUrl} from "@/api/system/user.js";
export default {
        data(){
            return{
                   fileList:[],
                   copeImage:""
            }
        },
        model:{
             prop:"imageUrl",
             event:"toUrl"
        },
        props:{
        imageUrl:{
            type:String
        },
       },
       mounted(){
          
       },
       methods:{
                //图片上传
          httpRequest(file){
         let fd = new FormData();
        fd.append("file", file.file);
        getImgUrl(fd).then((res) => {
        // this.ruleForm.imgUrl = res.url;
       
          this.$emit("toUrl",res.url)
        });
          },
          handleRemove(file, fileList){
             
          },
          allowImgsNum(){

          },
          success(response, file,fileList){
            
          },
       }
}
</script>

<style>

</style>